<template>
  <el-dialog :close-on-click-modal="false"  :title="phases.length? phases[0].name:'复核'" width="95%" :visible.sync="visibleValue" :before-close="handleClose">
    <!-- 重构布局开始 -->
    <div class="review-box">
      <div class="idx-part">
        <!-- 视频区域 -->
        <video controls autoplay ref="handleVideo" :src="currentVideos&&currentVideos.length? currentVideos[0].videoUrl:''" />
        <!-- idx图表 -->
        <div class="idx-chart">
            <IdxChart
              ref="idxChart"
              :list="idxDetail"
              :duration="duration"
              :startT="startT" 
              :progressValue="progressValue"
              v-if="Object.keys(idxDetail).length>0"
              @clickIdxChart="clickIdxChart"
              @clickIdxChartChange="clickIdxChartChange"
            />
        </div>
      </div>
      <div class="analysis-part">
        <div class="title">分析意见</div>
        <div class="form-area">
          <el-form :model="form" size="small" label-width="100px" ref="ruleForm">
            <el-form-item label="类别：" prop="code">
              <label slot="label">类&emsp;&emsp;别：</label>
              <span>{{ form.code }}</span>
            </el-form-item>
            <el-form-item label="分析项目：">
              <div style="display: flex; align-items: center; ">
                <el-select v-model="form.phaseId" placeholder="请选择分析项目" @change="changePhase">
                  <el-option v-for="phase in projectList" :key="phase.id" :label="phase.name" :value="phase.id">
                    <span style="float: left">{{ phase.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ phase.date }}</span>
                  </el-option>
                </el-select>
                <span v-if="snapshot" style="margin-left: 10px;">
                  <el-popover trigger="hover" placement="top">
                    <div>
                      <img :src="snapshot" />
                    </div>
                    <div slot="reference">
                      <el-tag size="medium">查看截图</el-tag>
                    </div>
                  </el-popover>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="状态：">
              <label slot="label">状&emsp;&emsp;态：</label>
              <el-select v-model="form.illegal" @change="changePhase2">
                <el-option v-for="(phase,index) in illegalList" :key="index" :label="phase.text" :value="phase.illegal">
                  <!-- <span style="float: left">{{ phase.name }}</span> -->
                  <span style="float: left">{{ phase.text}}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分析内容：" prop="content">
              <el-input type="textarea" rows="5" placeholder="请输入" autocomplete="off" v-model="form.content" />
            </el-form-item>
            <el-form-item label="存在问题：" prop="question">
              <el-input type="textarea" rows="5" placeholder="请输入" autocomplete="off" v-model="form.question" />
            </el-form-item>
            <el-form-item label="分析意见：" prop="opinion">
              <el-input type="textarea" rows="5" placeholder="请输入" autocomplete="off" v-model="form.opinion" />
            </el-form-item>
          </el-form>
          <div class="btn-wrap">
            <el-button type="plain" size="mini" @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="danger" size="mini" @click="submit">确定</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 重构布局结束 -->

    <!-- 原始结构开始 注释 -->
    <!-- <el-form :model="form" v-if="false">
      <el-form-item label="类别" label-width="65px">
        <span>{{ form.code }}</span>
      </el-form-item>
      <el-form-item label="状态" label-width="65px">
        <el-select v-model="form.phaseId" placeholder="请选择状态" @change="changePhase2">
          <el-option v-for="phase in phases" :key="phase.id" :label="phase.name" :value="phase.id">
              <span style="float: left">{{ phase.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ phase.date }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分析项目" label-width="100">
        <div style="display: flex; align-items: center; ">
          <el-select v-model="form.phaseId" placeholder="请选择分析项目" @change="changePhase1">
            <el-option v-for="phase in phases" :key="phase.id" :label="phase.name" :value="phase.id">
              <span style="float: left">{{ phase.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ phase.date }}</span>
            </el-option>
          </el-select>
          <span v-if="snapshot" style="margin-left: 10px;">
            <el-popover trigger="hover" placement="top">
              <div>
                <img :src="snapshot" />
              </div>
              <div slot="reference">
                <el-tag size="medium">查看截图</el-tag>
              </div>
            </el-popover>
          </span>
        </div>
      </el-form-item>

      <el-form-item label="分析内容" label-width="100">
        <el-input v-model="form.content" />
      </el-form-item>
      <el-form-item label="存在问题" label-width="100">
        <el-input v-model="form.question" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分析意见" label-width="100">
        <el-input v-model="form.opinion" autocomplete="off" />
      </el-form-item>
    </el-form> -->
    <!-- <div slot="footer" class="dialog-footer" v-if="false">
      <el-button @click="() => visibleValue = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div> -->
    <!-- 原始结构结束 注释 -->
  </el-dialog>
</template>

<script>
// import { DictModule } from '@/store/modules/dict';
// 引入idx曲线组件
import IdxChart from './detail/IdxChart/charts.vue'
import axios from 'axios';
// import { idxList } from '@/api/idx';
export default {
  components: {
    IdxChart
  },
  props:{
    progressValue: {
      type: Number,
      default: 0
    },
    startT: {
      type: String,
      default: ''
    },
    duration:{
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    phases: {
      type: Array,
      default() {
        return [];
      }
    },
    loadAnalysisForm: {
      type: Function,
      default(params) {
        return params;
      }
    },
    idxDetail: {
      type: Object,
      default() {
        return {};
      }
    },
    idxChartList:{
     type: Object,
      default() {
        return {};
      }
    },
    base64pic: {
      type: String,
      default: ''
    },
    currentVideos: {
      type: Array,
      default() {
        return [];
      }
    },
    baseURL: {
      type: String,
      default: ''
    },
    idxCurrentList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    handleFileSrc: {
      get() {
        return this.phases.length ? this.phases[0].handFile : '';
      }
    },
    snapshot:{
      get() {
        return this.form.base64Pic || this.base64pic;
      }
    },
    visibleValue: {
      get(){
        return this.visible;
      },
      set(value){
        this.$emit('update:visible', value);
      }
    },
    // phaseStatus: {
    //   get(){
    //     return DictModule.phaseStatus;
    //   }
    // },
    // phaseDetailStatus: {
    //   get(){
    //     return DictModule.phaseDetailStatus;
    //   }
    // },
    phaseId: {
      get(){
        return this.form.phaseId;
      }
    }
  },
  data(){
    return{
      form: {},
      statusOptions: [],
      // idxChartList: [],
      recordId: '',
      id: '',
      projectList: [],
      illegalList: [
        {
          illegal: 0,
          text: '违章'
        },
        {
          illegal: 1,
          text: '未处理'
        },
        {
          illegal: 2,
          text: '视频缺失'
        },
        {
          illegal: 3,
          text: '正常'
        },
        {
          illegal: 4,
          text: '记录'
        },
        {
          illegal: 5,
          text: '提醒'
        },
        {
          illegal: 6,
          text: '其他'
        }
      ]
      // visibleValue: false
    }
  },
  methods:{
    clickIdxChart(times){
      this.$emit('clickIdxChart',times)
    },
    clickIdxChartChange(times){
      this.$emit('clickIdxChartChange',times)
    },
    getSelect(){
      axios.get(`/api/ApiData/index?url=api/idx/phase/getByRId&method=GET&recordId=${this.recordId}`).then(res =>{
        // console.log('22222',res)
        this.projectList = res.data.data
      })
    },
    submit(){
      const phase = this.phases.find(
        (phase) => phase.id === this.form.phaseId
      );
      if (!phase || !phase.id) {
        // this.$message({
        //   message: '请选择项点',
        //   type: 'warning'
        // });
        // return;
      } else {
        this.visibleValue = false;
      }
      const data = Object.assign({}, this.form, {
        // item: phase.name,
        base64Pic: this.snapshot,
        assisDriverNum: this.idxCurrentList.encode12,
        cabNum: this.idxCurrentList.encode5,
        createBy: '',
        trainNum: this.idxCurrentList.encode8 + this.idxCurrentList.encode9,
        pic:'',
        id:this.id,
        driverNum:this.idxCurrentList.encode11,
        recordId: this.recordId
      });
      // api/idx/analysisLog
      // console.log('submit',data)
      this.postSubimit(data)
      // return {
      //   data,
      //   phase
      // };
    },
    postSubimit(data){
      var that = this
      axios.post(`${this.baseURL}api/idx/analysisLog`,data).then(res =>{
        console.log('123',res)
        if(res.data.code == 1){
          that.$message('保存成功');
          that.handleClose()
        }
      })
      // // 创建一个新的XMLHttpRequest对象
      // var xhr = new XMLHttpRequest();
      
      // // 配置请求类型为POST，URL以及是否异步处理
      // xhr.open('POST', '/api/ApiData/index?url=api/idx/analysisLog&method=POST', true);
      
      // // 设置请求头，如果需要发送JSON数据，设置Content-Type
      // xhr.setRequestHeader('Content-Type', 'application/json');
      
      // // 定义POST请求的数据
      // var data1 = JSON.stringify(data);
      
      // // 发送POST请求
      // xhr.send(data1);
      
      // // 监听请求完成事件
      // xhr.onreadystatechange = function() {
      //   console.log('xhr.readyState',xhr.readyState,xhr)
      //   if (xhr.status == 200) {
      //     // 请求成功，处理响应数据
      //     that.$message('保存成功');
      //     that.handleClose()
      //     return
      //   }  else {
      //     // 请求出错，处理错误情况
      //     console.error(xhr.statusText);
      //     that.$message('保存错误');
      //   }
      // };
    },
    initForm(){
      this.form = {
        phaseId: '',
        item: '',
        content: '',
        question: '',
        opinion: '',
        illegal: '',
        base64Pic: ''
      };
    },
    changePhase(e) {
      // if (!this.loadAnalysisForm || !this.phaseId || !this.idxDetail.recordId) {
      //   this.initForm();
      // } else {
        this.projectList.forEach(item => {
          if(item.id == e){
            const form = this.loadAnalysisForm({
              recordId: this.recordId,
              phaseId: item.id,
              item: item.name,
            });
            this.form = Object.assign({}, this.form, form);
          }
        })
        
      // }
    },
    changePhase2(){

    },
    handleClose() {
      console.log('jinlai')
      this.visibleValue = false
      // this.$emit('update:visible', this.visibleValue);
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    resetForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].resetFields();
    }
    // loadIdxItems() {
    //   const res =idxList({ id: this.phases[0].id });
    //   if (res.data) {
    //     this.idxChartList = res.data;
    //   } else {
    //     this.idxChartList = [];
    //   }
    // }
  },
  created() {
    this.recordId = this.$route.query.recordId?this.$route.query.recordId:''
    this.id = this.$route.query.id?this.$route.query.id:''
    this.getSelect()
    // console.log('idxDetail',this.idxDetail)
    // console.log('this.phases****************',this.phases)
    // console.log('idxCurrentList9999999999999',this.idxCurrentList)
    // if (this.phases.length) {
    //   this.loadIdxItems();
    // }
  },
  watch:{
    'phases':{
      handler(newV,oldV){
        // 修改视频地址
        if (this.$refs.handleVideo && newV) {
          (this.$refs.handleVideo).src =
            newV.length > 0 ? newV[0].handFile : '';
        }
        // 重新获取idx曲线数据
        if (
          (newV.length && oldV && !oldV.length) ||
          (newV.length && oldV && oldV.length && newV[0].id !== oldV[0].id)
        ) {
          // this.loadIdxItems();
        }
      },
      immediate: true,
      deep: true
    },
    'isComment':{
      handler(newV,oldV){
        if (newV) {
          console.log('newV',newV)
          this.visibleValue = newV
          this.initForm();
          const phase = this.phases.length > 0 ? this.phases[0] : {};
          this.form = Object.assign({}, this.form, {
            phaseId: phase.id,
            item: phase.name,
            illegal: phase.illegal,
            code: phase.code
          });
          this.changePhase();
        }
      }
    },
    'form.phaseId':{
      handler(newV,oldV){
        if (!newV) return;
        const obj = this.projectList.find(item => {
          return item.id === newV;
        });
        this.form.code = obj.code;
        // if (obj.code === 'H') {
        //   this.statusOptions = this.phaseStatus;
        //   console.log('this.statusOptions1',this.statusOptions)
        // } else {
        //   this.statusOptions = this.phaseDetailStatus;
        //   console.log('this.statusOptions2',this.statusOptions)
        // }
      }
    },
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__header {
  padding: 10px;
  background: #e5e5e5;
}
::v-deep .el-dialog__title {
  font-size: 15px;
}
::v-deep .el-dialog__headerbtn {
  top: 10px;
}
.review-box {
  position: relative;
}
.review-box .analysis-part {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  overflow: auto;
}
.review-box .analysis-part .form-area {
  padding-top: 20px;
  padding-right: 26px;
  padding-left: 10px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
.btn-wrap {
  text-align: right;
}
.review-box .analysis-part .title {
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  font-size: 14px;
  color: #323232;
  background: #f5f5f5;
  border-bottom: 1px solid #d9d9d9;
}
.review-box .idx-part {
  margin-right: 400px;
  height: 100%;
}
.review-box .idx-part .idx-chart {
  background: #06131d;
  height: 206px;
  padding: 10px;
  border-top: 1px solid #adadad;
}
.review-box .idx-part .idx-chart .btn {
  color: white;
  text-align: right;
}
::v-deep .el-switch__label {
  color: white;
}
::v-deep .el-switch__label.is-active {
  color: #00ee00;
}
.review-box .idx-part video {
  width: 100%;
  height: 450px;
  background: #000;
  vertical-align: middle;
  object-fit: fill;
}
.review-box .idx-part video:focus {
  outline: none;
}
</style>

